<template>
    <n-form
        ref="formRef"
        label-placement="top"
        :label-width="80"
        :model="form"
        :rules="rules"
    >

        <div class="flex">
            <div class="w-70%">
                <n-form-item label="回复类型">
                    <jb-radio-group
                        v-model:value="form.type"
                        url="/api/admin/wechatAutoReply/content/types"
                    ></jb-radio-group>
                </n-form-item>
                <div v-if="form.type ==='news'||form.type ==='video'||form.type ==='image'||form.type ==='voice'" class="flex items-center mb-5">
                    <jb-btn type="primary" secondary   :drawer-component="WechatMaterial" :drawer-args="{
                        width:1400
                    }" :drawer-component-props="{
                        type:form.type,
                        mpId:props.mpId
                    }" icon="mingcute:wechat-line" >从微信素材库选择</jb-btn>

<!--                    <jb-upload-->
<!--                        class="mt-8px"-->
<!--                        v-if="form.type ==='news'||form.type ==='image'"-->
<!--                        v-model="form.poster"-->
<!--                        save-path="wechat/{date(yyMMdd)}/{random(6)}/{ori}"-->
<!--                    >-->
<!--                        <jb-btn class="ml-20px" type="error" secondary icon="tdesign:app">从本地选择</jb-btn>-->
<!--                    </jb-upload>-->

                </div>
                <n-form-item v-if="form.type=='news'||form.type=='video'||form.type=='music'" label="标题" path="title">
                    <n-input v-model:value="form.title" placeholder="" />
                </n-form-item>
                <n-form-item v-if="form.type=='news'||form.type=='text'||form.type=='video'||form.type=='music'" label="描述内容" path="content">
                    <n-input v-model:value="form.content" type="textarea" placeholder="" />
                </n-form-item>
                <n-form-item v-if="form.type=='news'||form.type=='music'" label="URL地址" path="url">
                    <n-input v-model:value="form.url" placeholder="" />
                </n-form-item>
            </div>
            <div class="ml-28px shrink-0" v-if="form.type=='news'||form.type=='text'">
                <n-form-item v-if="form.type=='news'" label="封面图" path="poster">
                    <jb-upload
                        class="w-260px"
                        v-model="form.poster"
                        save-path="wechat/{date(yyMMdd)}/{random(6)}/{ori}"
                    >
                        <div class="flex-col">
                            <img v-if="form.poster" :src="form.poster" class="w-260px" alt="">
                            <div v-else class="w-260px h-200px flex justify-center items-center" style="border: 2px dashed #ccc">
                                <jb-icon class="text-70px" style="color: #646cff" icon="iconamoon:cloud-upload-fill" />
                            </div>
                            <span class="text-12px flex justify-center mt-10px">建议尺寸 900*383 （像素）小于200K</span>
                        </div>
                    </jb-upload>
                </n-form-item>
                <div class="flex-col" v-if="form.type=='text'" >
                    <span class="text-20px"></span>
                    <div class="w-300px h-300px" style="overflow-y: auto">
                        <wechat-memes/>
                    </div>
                </div>
            </div>
        </div>

    </n-form>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'
import WechatMaterial
    from "@/views/_builtin/development/wechat/components/config-modal/cpns/keyword/content-manage/components/wechat-material.vue";

const props = withDefaults(
    defineProps<{
        autoReplyId: string
        mpId: string
        id?: string
    }>(),
    {
        id: '',
        autoReplyId: '',
        mpId: ''
    }
)

/** 表单相关 start */
const formRef = ref<FormInst | null>()
interface BucketType {
    type: string
    title: string
    content: string
    poster: string
    url: string
    mediaId: string
}
const form = useResetableData<BucketType>({
    type: 'news',
    title: '',
    content: '',
    poster: '',
    url: '',
    mediaId: ''
})
const rules: FormRules = {
    type: new Rules().required('请选择回复类型').value,
    title: new Rules().required('请输入标题').value,
    content: new Rules().required('请输入描述内容').value,
    poster: new Rules().required('请选择封面图').value,
    url: new Rules().required('请输入URL地址').value,
    mediaId: new Rules().required('请输入素材ID').value
}
/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()
    let url = props.id ? '/api/admin/wechatAutoReply/content/update' : '/api/admin/wechatAutoReply/content/save'
    await JBoltApi.tryPost(url, {
        autoReplyId: props.autoReplyId,
        wechatReplyContent: {
            mpId: props.mpId,
            type: form.type,
            title: form.title,
            content: form.content,
            poster: form.poster,
            url: form.url,
            mediaId: form.mediaId,
            autoReplyId: props.autoReplyId,
            id: props.id
        }
    })
    return true
}


function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/wechatAutoReply/content/${props.id}`).then(({ error, result }) => {
        if (error) return
        form._reset(result.data)
    })
}


onMounted(() => {
    if (props.id) {
        loadEditData()
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
